<template>
	<view class="content">
		<view v-for="item of list" class="block-view-child">
			<view class="express_no">
				运单号：SF21311910035
			</view>
			<view class="express-view">
				<view class="express_no_view">
					<text class="city">{{ item.senderAddress }}</text>
					<text class="sign">{{ item.sender }}</text>
				</view>
				<view class="express_no_view">
					<text class="arrow">----></text>
					<text
						class="sign">{{ item.status === '1' ? '待签收' : '已签收' }}</text>
				</view>
				<view class="express_no_view">
					<text class="city">{{ item.recipientAddress }}</text>
					<text class="sign">{{ item.recipient }}</text>
				</view>
			</view>
			<view class="express_no">
				签收时间：{{ item.receiptTime }}
			</view>
			<view class="view-line" />
			<view class="btn-view">
				<button class="btn" round :plain="true" size="mini" @click="addMark(item)">添加备注</button>
				<button class="btn" type="warn" round :plain="true" size="mini" @click="deleteItem(item)">删除</button>
			</view>
		</view>
		<view>
			<!-- 提示信息弹窗 -->
			<uni-popup ref="message" type="message">
				<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
			</uni-popup>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog :type="dialogType" cancelText="关闭" confirmText="同意" title="警告" :content="contentText"
					@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
			</uni-popup>
			<!-- 输入框示例 -->
			<uni-popup ref="inputDialog" type="dialog">
				<uni-popup-dialog ref="inputClose" mode="input" title="备注" :value="rootItem.mark" placeholder="请输入备注内容"
					@confirm="dialogInputConfirm"></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						id: '1',
						number: 'SF21311910035-1',
						senderAddress: '福州市',
						sender: '洪本润-1',
						status: '1',
						recipientAddress: '南京市',
						recipient: '洪本润-1',
						receiptTime: '2024-11-16 12:00:00',
						mark: '21311910035'
					},
					{
						id: '2',
						number: 'SF21311910035-2',
						senderAddress: '福州市',
						sender: '洪本润-2',
						status: '2',
						recipientAddress: '南京市',
						recipient: '洪本润-2',
						receiptTime: '2024-11-16 13:00:00',
						mark: ''
					},
					{
						id: '3',
						number: 'SF21311910035-3',
						senderAddress: '福州市',
						sender: '洪本润-3',
						status: '2',
						recipientAddress: '南京市',
						recipient: '洪本润-3',
						receiptTime: '2024-08-16 14:00:00',
						mark: ''
					},
					{
						id: '4',
						number: 'SF21311910035-4',
						senderAddress: '福州市',
						sender: '洪本润-4',
						status: '1',
						recipientAddress: '南京市',
						recipient: '洪本润-4',
						receiptTime: '2024-11-16 15:00:00',
						mark: ''
					}
				],
				msgType: 'success',
				messageText: '',
				dialogType: 'warning',
				contentText: '',
				rootItem: {}
			}
		},
		methods: {
			addMark(item) {
				this.rootItem = Object.assign({}, item)
				this.$refs.inputDialog.open()
			},
			dialogInputConfirm(val) {
				uni.showLoading()
				setTimeout(() => {
					uni.hideLoading()
					this.rootItem.mark = val
					// 关闭窗口后，恢复默认内容
					this.$refs.inputDialog.close()
					this.messageText = `添加备注成功！`
					this.list.splice(this.list.findIndex((row) => row.number === this.rootItem.number), 1, this
						.rootItem)
					this.$refs.message.open()
				}, 3000)
			},
			deleteItem(item) {
				this.rootItem = Object.assign({}, item)
				this.contentText = `确认删除当前单号吗？`
				this.$refs.alertDialog.open()
			},
			dialogConfirm() {
				this.messageText = `当前单号删除成功！`
				this.list.splice(this.list.findIndex((row) => row.number === this.rootItem.number), 1)
				this.$refs.message.open()
			},
			dialogClose() {
				console.log('点击关闭')
			}
		}
	}
</script>

<style>
	.content {
		background-color: #f2f2f2;
		padding: 10px;
		height: calc(100vh - 95px);
		box-sizing: border-box;
		overflow: auto;
	}

	.block-view-child {
		background-color: white;
		padding: 20px;
		border-radius: 10px;
		margin-bottom: 10px;
	}

	.express_no {
		color: gray;
	}

	.express-view {
		display: flex;
		flex-direction: row;
		justify-content: center;
		width: 100%;
		margin: 10px;
	}

	.express_no_view {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 30%;
	}

	.city {
		font-size: larger;
		margin-bottom: 5px;
	}

	.user {
		color: gray;
	}

	.arrow {
		color: red;
		font-weight: bold;
	}

	.sign {
		font-size: smaller;
	}

	.view-line {
		border-top: 1px solid #bdbdbd;
		height: 0;
		margin: 20px 0;
	}

	.btn-view {
		display: flex;
		flex-direction: row;
	}

	.btn {
		font-size: 12px;
		border-radius: 20px;
	}
</style>